<template>
  <a-card :bordered="false">
    <a-row>
      <a-col :span="10">
        <a-radio-group :value="barType" @change="statisticst">
          <a-radio-button value="1">按年统计</a-radio-button>
          <a-radio-button value="2">按季度统计</a-radio-button>
          <a-radio-button value="3">按月统计</a-radio-button>
        </a-radio-group>
      </a-col>
      <a-col :span="14">
        <a-form layout="inline" style="margin-top: -4px">
          <a-form-item label="年份" v-if="barType == 1">
            <a-date-picker
              mode="year"
              placeholder="请选择年份"
              format="YYYY"
              v-model="yearQuarter"
              style="width: 100%"
              :open="yearShowOne"
              @openChange="openChangeOne"
              @panelChange="panelChangeOne"
            />
          </a-form-item>
          <a-form-item label="季度" v-if="barType == 2">
            <a-select style="width: 120px" @change="handleChange" placeholder="请选择季度">
              <a-select-option value="1"> 第一季度 </a-select-option>
              <a-select-option value="2"> 第二季度 </a-select-option>
              <a-select-option value="3"> 第三季度 </a-select-option>
              <a-select-option value="4"> 第四季度 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="月份" v-if="barType == 3">
            <a-date-picker
              mode="month"
              placeholder="请选择月份"
              format="YYYY-MM"
              v-model="monthQuarter"
              style="width: 100%"
              :open="monthShowOne"
              @openChange="openMonthChangeOne"
              @panelChange="panelChangeOne"
            />
          </a-form-item>
        </a-form>
      </a-col>
      <bar-multid title="记录统计" :height="height" :fields="fields" :aliases="aliases" :dataSource="dataSource" />
    </a-row>
  </a-card>
</template>
  
  <script>
import BarMultid from '@/components/chart/BarMultid'
import { getAction } from '@/api/manage'
export default {
  name: 'ViserChartDemo',
  components: {
    BarMultid,
  },
  data() {
    return {
      height: 420,
      yearShowOne: false,
      monthShowOne: false,
      rankList: [],
      barType: '1',
      barData: [],
      areaData: [],
      yearQuarter: '',
      monthQuarter: '',
      dataSource: [],
      fields: ['loginCount', 'operateCount', 'checkCount', 'errorCount'],

      // 别名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
      aliases: [
        { field: 'loginCount', alias: '登录次数' },
        { field: 'operateCount', alias: '操作次数' },
        { field: 'checkCount', alias: '审批次数' },
        { field: 'errorCount', alias: '发现问题次数' },
      ],

      url: {
        operateYearReportUrl: '/modules/zzzsReport//operateYearReport',
        operateQuarteReportUrl: '/modules/zzzsReport/operateQuarteReport',
        operatMonthReportUrl: '/modules/zzzsReport/operatMonthReport',
      },
    }
  },
  created() {
    setTimeout(() => {
      this.loadData(this.url.operateYearReportUrl, new Date())
    }, 100)
  },
  methods: {
    statisticst(e) {
      console.log(e)
      if (e.target.value == 1) {
        this.barType = '1'
        this.loadData(this.url.operateYearReportUrl)
      } else if (e.target.value == 2) {
        this.barType = '2'
        this.loadData(this.url.operateQuarteReportUrl)
      } else {
        this.barType = '3'
        this.loadData(this.url.operatMonthReportUrl)
      }
    },
    //获取季度报表
    handleChange(value) {
      this.loadData(this.url.operateQuarteReportUrl, value)
    },
    //获取年月报表记录
    loadData(url, date) {
      console.log(url)
      getAction(url, { date: date }).then((res) => {
        console.log(res.result)
        this.dataSource = res.result
      })
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true
      }
    },
    openMonthChangeOne(status) {
      if (status) {
        this.monthShowOne = true
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      console.log()
      if (this.barType == '1') {
        this.loadData(this.url.operateYearReportUrl, value)
        this.yearQuarter = value
        this.yearShowOne = false
      } else if (this.barType == '3') {
        this.loadData(this.url.operatMonthReportUrl, value)
        this.monthQuarter = value
        this.monthShowOne = false
      }
    },
  },
}
</script>
  
  <style scoped>
</style>
  